<template>
  <div class="addservice">
    <el-dialog
      title="添加开服信息"
      :close-on-click-modal="false"
      :visible.sync="isVisible"
      @close="closeDialog"
    >
      <el-form
        :model="formdata"
        :rules="rules"
        ref="formdata"
        class="demo-ruleForm"
        label-width="120px"
      >
        <el-form-item label="开服名称" prop="sername">
          <el-input
            type="text"
            placeholder="请输入开服名称"
            v-model="formdata.sername"
            maxlength="12"
            show-word-limit
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="关联游戏" prop="gameId">
          <el-select
            v-model="formdata.gameId"
            placeholder="输入游戏名搜索"
            filterable
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.gameName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开服时间" prop="startTime">
          <el-date-picker
            v-model="formdata.startTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm"
            format="yyyy-MM-dd HH:mm"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('formdata')"
          >确 定</el-button
        >
        <el-button @click="isVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { addservice } from "@/api/openService";
import { getOptionList } from "@/api/gameManage";
export default {
  inject: ["reload"],
  data() {
    return {
      isVisible: this.isShow,
      formdata: {
        sername: "",
        gameId: "",
        startTime: "",
      },
      options: [],
      rules: {
        sername: [
          { required: true, message: "请输入开服名称", trigger: "blur" },
        ],
        gameId: [
          { required: true, message: "请选择关联游戏", trigger: "blur" },
        ],
        startTime: [
          { required: true, message: "请添加开服时间", trigger: "blur" },
        ],
      },
    };
  },
  props: {
    isShow: Boolean,
    dialogRow: Object,
  },
  mounted() {
    getOptionList().then((res) => {
      this.options = res.data.list;
    });
  },
  methods: {
    closeDialog() {
      this.$emit("closeDialog");
    },
    // 表单提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const para = Object.assign({}, this.formdata);
          addservice(para)
            .then((res) => {
              this.$message({
                message: res.msg,
                type: "success",
              });
              setTimeout(() => {
                this.reload();
              }, 20);
            })
            .catch((error) => {});
          this.isVisible = false;
        }
      });
    },
  },
};
</script>
<style lang="scss">
.addservice {
  .el-dialog__wrapper .el-input.is-disabled .el-input__inner {
    color: #a5a4bf !important;
  }
  .el-input {
    width: 200px;
  }
  .el-select .el-input {
    width: 200px;
  }
  .el-form-item__label {
    padding: 0 20px 0 0;
  }
  .el-upload {
    .el-button {
      padding: 10px 77px;
      color: #a5a4bf;
      border: 1px solid #a5a4bf;
      font-size: 12px;
    }
  }
  .el-form-item__content {
    margin-bottom: 20px;
    .iconAlert {
      position: absolute;
      padding: 0;
      top: 5px;
      left: 230px;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
    }
    .iconAlert,
    .el-input__inner {
      color: #a5a4bf;
      border: 1px solid #a5a4bf;
    }
    .el-input__inner::placeholder {
      color: #a5a4bf;
    }
  }
  .el-dialog__wrapper .el-input.is-disabled .el-input__inner {
    border: 1px solid #a5a4bf;
    background-color: #f5f7fa;
    cursor: not-allowed;
  }
}
</style>